.common-style {
  height: 698px;
  padding-top: 40px;

  .hd {
    h2 {
      float: left;
    }

    em {
      float: left;
    }
  }

  .bd {
    padding-top: 32px;

    > ul {
      > li {
        float: left;
        margin-right: 32px;
        margin-bottom: 32px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
        background-color: white;

        &:hover {
          box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
        }
        &:nth-child(3) {
          margin-right: 0;
        }
        &:nth-child(7) {
          margin-right: 0;
        }
        &.big-grid {
          width: 560px;
          height: 270px;
          position: relative;

          .info {
            position: absolute;
            width: 560px;
            height: 103px;
            color: white;
            background-color: rgba(0, 0, 0, 0.55);
            bottom: 0;
            left: 0;
            padding: 30px 26px;
            box-sizing: border-box;
            line-height: 26px;
          }
        }
        .tag {
          position: absolute;
          width: 74px;
          height: 40px;
          color: white;
          background-color: rgba(0, 0, 0, 0.55);
          bottom: 103px;
          left: 0;
          text-align: center;
          line-height: 40px;
          z-index: 9999;
        }
        &.pro-grid {
          width: 264px;
          height: 270px;

          .picbox {
            overflow: hidden;
            position: relative;
            height: 184px;

            .tag {
              bottom: 0;
            }
          }

          .wordbox {
            padding: 14px;
            font-size: 14px;
            color: #1c1f21;
            line-height: 26px;
          }
        }
      }
    }
  }
}
